<template>
  <view class="content">
    <tui-icon name="about" :size="16" />
    <view class="text-area">
      <text class="title">{{ title }}</text>
    </view>
    <tui-button @click="changeTitle">click me</tui-button>
  </view>
</template>

<script setup lang="ts">
import { onHide } from '@dcloudio/uni-app'

import { useTitle } from '@/hooks/useTitle'

const { title, } = useTitle('hello world')

function changeTitle () {
  uni.showModal({
    title: '修改标题',
    content: '',
    editable: true,
    success (result) {
      if (result.confirm) {
        title.value = result.content || ''
      }
    },
  })
}

const map = {
  a: 1,
  b: 2,
}

console.log(map)

onHide(() => {
  console.log('page hide!!')
})
</script>

<style lang="scss">
.content {
  padding: 24rpx;
}
</style>
